/* 
  Redux-核心概念-小结
  1.state：保存仓库状态数据
  2.dispatch：
  特点：更新state的唯一方法，调用store.dispatch(),并传入一个action队形
  作用：触发action对象
  3.action:
  本质：具有type属性的JS对象
  作用：描述发生了什么
  4.reducer:
  作用：计算和返回最新状态 state
  不可变的数据：通过新值覆盖旧值：(state,action) =>newState
  纯函数：固定输入、固定输出
  注意：发请求、获取DOM都不能写在reducer函数中
  5.store
  仓库，包含了以上所有的内容！
  注意:
    1.不可变数据
    2.单向数据流
*/

import React from 'react';
import { legacy_createStore as createStore } from 'redux';

const store = createStore(function (state = { count: 100 }, action) {
  console.log('action----->', action);

  if (action.type === 'add') {
    // 解构出来就值，通过新值覆盖旧值
    return {
      ...state,
      count: state.count + 1,
    };
  }
  if (action.type === 'des') {
    return {
      ...state,
      count: state.count - 1,
    };
  }

  // 需要在函数里把state返回出去
  return state;
});

store.dispatch({ type: 'add' });
// 1. 通过订阅，也就是 store.subscribe( 回调 ) 可以监听到数据的变化
const unFn = store.subscribe(() => {
  console.log('数据变化了----->', store.getState());
});
store.dispatch({ type: 'add' });
store.dispatch({ type: 'des' });

// 2. 调用解除监听的函数，不再监听仓库数据变化
// 💥 关闭监听后，不会再触发监听的函数
unFn();

export default function App() {
  return <div></div>;
}
